<html>

<head>
    <link rel="stylesheet" type="text/css" href="ui.css">
    <link rel="stylesheet" type="text/css" href="chrome-tabs.css">
    <script src="ui.js"></script>
    <script src="anchorme.js"></script>
</head>

<body>
    <button id="chrome-tabs-add-tab">+ New Tab</button>
    <div class="chrome-tabs" data-chrome-tabs-instance-id="0">
            <div class="chrome-tabs-content"></div>
            <div class="chrome-tabs-bottom-bar" style="z-index: 3;"></div>
    </div>

    <svg style="display: none;">
    <defs>
      <g id="svg_arrow_back"><path d="M427 277v-42h-260l119 -120l-30 -30l-171 171l171 171l30 -30l-119 -120h260z" /></g>
      <g id="svg_arrow_forward"><path d="M256 427l171 -171l-171 -171l-30 30l119 120h-260v42h260l-119 120z" /></g>
      <g id="svg_refresh"><path transform="matrix(1 0 0 -1 0 512)" d="M377 377l50 50v-150h-150l69 69c-23 23 -55 38 -90 38c-71 0 -128 -57 -128 -128s57 -128 128 -128c56 0 104 35 121 85h44c-19 -74 -85 -128 -165 -128c-94 0 -170 77 -170 171s76 171 170 171c47 0 90 -19 121 -50z" /></g>
      <g id="svg_stop"><path d="M405 375l-119 -119l119 -119l-30 -30l-119 119l-119 -119l-30 30l119 119l-119 119l30 30l119 -119l119 119z" /></g>
      <g id="svg_tools"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></g>
    </defs>
    </svg>

    <div id="bar">
      <span id="back" class="icon disabled">
        <svg viewBox="0 0 512 512" width="20" height="20"><use xlink:href="#svg_arrow_back"/></svg>
      </span>
      <span id="forward" class="icon disabled">
        <svg viewBox="0 0 512 512" width="20" height="20"><use xlink:href="#svg_arrow_forward"/></svg>
      </span>
      <span id="refresh" class="icon">
        <svg viewBox="0 0 512 512" width="20" height="20"><use xlink:href="#svg_refresh"/></svg>
      </span>
      <span id="stop" class="icon" style="display: none;">
        <svg viewBox="0 0 512 512" width="20" height="20"><use xlink:href="#svg_stop"/></svg>
      </span>
      <input onfocus="select_next_mouseup = true;" onmouseup="if (select_next_mouseup) this.select(); select_next_mouseup = false;" type="text" id="address"></input>
      <span id="toggle-tools" class="icon">
        <svg viewBox="0 0 24 24" width="18" height="18"><use xlink:href="#svg_tools"/></svg>
      </span>
    </div>
    
    <script src="draggabilly.pkgd.min.js"></script>
    <script src="chrome-tabs.js"></script>
    <script>
        var el = document.querySelector('.chrome-tabs')
        var chromeTabs = new ChromeTabs()
        var select_next_mouseup = false;
        var defaultFavicon = "earth.svg";

        chromeTabs.init(el, {
            tabOverlapDistance: 6,
            minWidth: 45,
            maxWidth: 243
        })
      
        function addTab(id, title, faviconUrl, isLoading) {
            chromeTabs.addTab({id: id, title: title, favicon: defaultFavicon, loading: isLoading });
        }
      
        function updateTab(id, title, faviconUrl, isLoading) {
            const tab = document.querySelector("[data-tab-id='" + id + "']");
            if (tab)
                chromeTabs.updateTab(tab, {title: title, favicon: defaultFavicon, loading: isLoading});
        }
      
        function closeTab(id) {
            const tab = document.querySelector("[data-tab-id='" + id + "']");
            if (tab)
              chromeTabs.removeTab(tab);
        }
      
        function bindCallbacks() {
            el.addEventListener('requestNewTab', ({ detail }) => OnRequestNewTab());
            el.addEventListener('requestTabClose', ({ detail }) => OnRequestTabClose(detail.tabEl.getAttribute('data-tab-id')));
            el.addEventListener('activeTabChange', ({ detail }) => OnActiveTabChange(detail.tabEl.getAttribute('data-tab-id')));
            document.querySelector('#back').addEventListener('click', event => OnBack());
            document.querySelector('#forward').addEventListener('click', event => OnForward());
            document.querySelector('#refresh').addEventListener('click', event => OnRefresh());
            document.querySelector('#stop').addEventListener('click', event => OnStop());
            document.querySelector('#toggle-tools').addEventListener('click', event => OnToggleTools());
            var address = document.querySelector('#address');
            address.onkeypress = (function(e) { 
                if (e.which == '13') {
                    address.blur();
                    let url = address.value;
                    if (anchorme.validate.url(url) || anchorme.validate.ip(url)) {
                        if (url.toLowerCase().startsWith("http://") || url.toLowerCase().startsWith("https://")) {
                            OnRequestChangeURL(url);
                        } else {
                            OnRequestChangeURL("http://" + url);
                        }
                    } else if (url.toLowerCase().startsWith("file:///")) {
                        OnRequestChangeURL(url);
                    } else if (url.toLowerCase().startsWith("file://")) {
                        OnRequestChangeURL("file:///" + url.substring(7));
                    } else {
                        // Interpret as search
                        OnRequestChangeURL("https://www.google.com/search?q=" + encodeURIComponent(url));
                    }

                    return false;
                }
            });
        }
      
        bindCallbacks();
    </script>
</body>

</html>